<template>
  <view>
    <cu-custom bgColor="bg-gradual-green" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">肌肉力量</block>
    </cu-custom>
    <view class="contents u-f-ajc u-f-column">
      <view>1分钟俯卧撑</view>
      <view style="font-size: 90rpx;margin: 100rpx 0;">{{minute}}:{{second}}</view>

      <view class="items u-f-ajc u-f-column">
        <view style="margin-bottom: 50rpx;">测试值</view>
        <view class="inputs">
          <input type="text" v-model="input" placeholder="个" class="t-a-c" />
        </view>
      </view>

      <view class="u-f-ajc u-f-jsa" style="width: 100%;">
        <view class="start u-f-ajc">
          <view class="u-f-ajc" @click="start">{{isStart ? '完成' : '启动'}}</view>
        </view>
        <view class="start u-f-ajc" :class="isButton2 ? '' : 'acitve2'">
          <view class="u-f-ajc" @click="addInput">计次</view>
        </view>
      </view>

      <view @click="confirm" v-if="isButton" style="position: fixed;bottom: 50rpx;left: 10%; z-index: 99; width: 80%;height: 80upx;line-height: 80upx;text-align: center;background-color: #39BB9E;color: #fff;font-size: 32upx;border-radius: 10rpx;">
        保存
      </view>
    </view>
  </view>
</template>

<script>
  let timer;

  export default {
    data() {
      return {
        second: '00',
        minute: '01',
        input: '',
        isStart: false,
        isButton: false,
        isButton2: false,
      }
    },
    watch: {
      input(newVal) {
        if (this.input) this.isButton = true
      }
    },
    methods: {
      start() {
        this.isStart = !this.isStart
        if (this.isStart) {
          this.second = '00'
          this.minute = '01'
          this.isButton2 = true
          timer = setInterval(() => {
            if (parseInt(this.minute) > 0 && parseInt(this.second) == 0) {
              this.minute = '0' + (parseInt(this.minute) - 1)
              this.second = 60
            }
            if (parseInt(this.minute) == 0 && parseInt(this.second) == 1) {
              clearInterval(timer)
            }
            this.second = '' + (parseInt(this.second) - 1)
            if (this.second.length == 1) { // 个位数的时候 给它前面加个零
              this.second = '0' + parseInt(this.second)
            }
          }, 125)
        } else {
          clearInterval(timer)
          this.isStart = false
          this.isButton2 = false
        }
      },
      addInput() {
        if (this.isButton2) this.input = Number(this.input) + 1
      },
      goPage() {
        let url = `../add_assessment`;
        uni.redirectTo({
          url
        })
      },
      confirm() {
        let objs = uni.getStorageSync('fmsDetails2')
        let list = {
          second: this.second,
          minute: this.minute,
          input: this.input,
        }
        objs.list4 = list
        uni.setStorageSync('fmsDetails2', objs)
        this.goPage();
      },
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #4B505F !important;
  }

  .contents {
    padding: 30rpx;
    color: #FFFFFF;
  }

  .items {
    width: 44%;
    height: 300rpx;
    box-sizing: border-box;
    padding: 0 30rpx;
    font-size: 30rpx;

    .inputs {
      width: 100%;
      border-bottom: 1px solid #636875;
      padding-bottom: 10rpx;
      color: $uni-color-zhuti;
    }
  }


  .start {
    width: 130rpx;
    height: 130rpx;
    margin-top: 150rpx;
    border-radius: 100%;
    border: 2px solid $uni-color-zhuti;
    padding: 6rpx;

    view {
      background-color: $uni-color-zhuti;
      width: 100%;
      height: 100%;
      border-radius: 100%;
    }
  }

  .acitve2 {
    border: 2px solid #365966;

    view {
      background-color: #365966;
    }
  }
</style>
